<template>
    <van-search v-model="value" placeholder="" />
    <div class="box">
        <div class="zuo">
            <van-sidebar v-model="active">
                <van-sidebar-item v-for="i in fllist" :title="i.cat_name" />
            </van-sidebar>
        </div>
        <div class="you">
             <van-tabs v-model:active="active">
                    <van-tab title="为你推荐">为你推荐</van-tab>
                    <van-tab title="热门品牌">热门品牌</van-tab>
                    <van-tab title="体恤">体恤</van-tab>
                    <van-tab title="上装">上装</van-tab>
                </van-tabs>
            <div v-for="i in fllist[active]?.children">
                <h5>{{ i.cat_name }}</h5>
                <van-grid :column-num="3">
                    <van-grid-item v-for="value in i.children" :key="value" :icon="value.cat_icon"
                        :text="value.cat_name" @click="tz(value.cat_id)" />
                </van-grid>
            </div>
        </div>
    </div>
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const active = ref(0);
const fllist = ref([])
axios.get('https://api-hmugo-web.itheima.net/api/public/v1/categories').then((res) => {
    fllist.value = res.data.message
})
const tz = (cid) => {
    router.push({
        path: '/lb',
        query: {
            cid
        }
    })
}
</script>

<style>
.box {
    display: flex;
}

.zuo {
    width: 90px;
}

.you {
    flex: 1;
    text-align: center;
    line-height: 38px;
}
</style>